<template>
    <el-select v-model="row[column.property]" :multiple="multiple"
               :disabled="disabled" :value-key="valueKey"
               :size="size" :clearable="clearable" :ref="selectRef"
               :collapse-tags="collapseTags" :multiple-limit="multipleLimit"
               :name="name" :autocomplete="autocomplete"
               :placeholder="placeholder" :filterable="filterable"
               :allow-create="allowCreate" :filter-method="filterMethod"
               :remote="remote" :remote-method="remoteMethod"
               :loading="loading" :loading-text="loadingText"
               :no-match-text="noMatchText" :no-data-text="noDataText"
               :popper-class="popperClass" :reserve-keyword="reserveKeyword"
               :default-first-option="defaultFirstOption"
               :popper-append-to-body="popperAppendToBody"
               :automatic-dropdown="automaticDropdown"
               class="table_custom_select"
               @change="handleChange" @clear="handleClear"
               @blur="handleBlur" @focus="handleFocus"
               @visible-change="handleVisibleChange">
        <el-option v-for="(item, index) in dataList" :key="index"
                   :label="item.label" :value="item.value"/>
    </el-select>
</template>

<script>
export default {
    name: "CustomSelect",
    props: {
        params: Object,
        multiple: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        valueKey: {
            type: String,
            default: 'value',
        },
        size: String,
        clearable: {
            type: Boolean,
            default: false,
        },
        collapseTags: {
            type: Boolean,
            default: false,
        },
        multipleLimit: {
            type: Number,
            default: 0,
        },
        name: String,
        autocomplete: {
            type: String,
            default: 'off',
        },
        placeholder: {
            type: String,
            default: '请选择',
        },
        filterable: {
            type: Boolean,
            default: false,
        },
        allowCreate: {
            type: Boolean,
            default: false,
        },
        filterMethod: Function,
        remote: {
            type: Boolean,
            default: false,
        },
        remoteMethod: Function,
        loading: {
            type: Boolean,
            default: false,
        },
        loadingText: {
            type: String,
            default: '加载中',
        },
        noMatchText: {
            type: String,
            default: '无匹配数据',
        },
        noDataText: {
            type: String,
            default: '无数据',
        },
        popperClass: String,
        reserveKeyword: {
            type: Boolean,
            default: false,
        },
        defaultFirstOption: {
            type: Boolean,
            default: false,
        },
        popperAppendToBody: {
            type: Boolean,
            default: true,
        },
        automaticDropdown: {
            type: Boolean,
            default: false,
        },
        options: {
            type: Array,
            default () {
                return [];
            },
        },
        dataMethod: {
            type: Function,
            default: null,
        },
    },
    data () {
        return {
            row: {},
            column: {},
        };
    },
    computed: {
        selectRef() {
            const {row, column} = this.params;
            return `select_${column.property}_${row._X_ROW_KEY}`
        },
        dataList() {
            const {row, column} = this.params;
            if (typeof this.dataMethod === 'function') {
                return this.dataMethod(row, column);
            }
            return this.options || [];
        },
    },
    created () {
        this.init();
    },
    methods: {
        async init () {
            let _this = this;
            const {row, column} = this.params;
            this.row = row;
            this.column = column;
            this.$nextTick(() => {
                let selectInput = _this.$refs[_this.selectRef].$refs.reference;
                if (selectInput) {
                    $(selectInput.$el).off('keyup').on('keyup', e => {
                        e.stopPropagation();
                        if (e.keyCode === 13) {
                            this.$emit('enter', row[column.property]);
                        }
                    });
                }
            });
        },
        handleChange () {
            const {row, column} = this;
            this.$emit('change', row[column.property]);
        },
        handleClear () {
            this.$emit('clear');
        },
        handleBlur () {
            this.$emit('blur');
        },
        handleFocus () {
            this.$emit('focus');
        },
        handleVisibleChange (visible) {
            const _this = this;
            this.$emit('visibleChange', visible);
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.table_custom_select {
    height: 30px !important;

    /deep/.el-input__inner {
        height: 30px !important;
        padding-left: 5px;
        padding-right: 26px;
    }

    /deep/.el-input__suffix {
        right: 1px;
        height: 28px;
    }

    /deep/.el-input__clear {
        line-height: 30px;
    }
}
</style>
